<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Yeeboo Main</title>
        <link type="text/css" rel="stylesheet" href="css/selector/imgareaselect-default.css">
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <style type="text/css">
            #pgHeader {
                background: #729CCF;
                font-size: 13pt;
                font-weight: bold;
                margin: 5px;
                padding: 3px;
            }.prBx {
                font-size: 14px;
                margin: 5px;
                text-align: left;
                background: #E5EAF1;
                float: left;
                padding: 5px;
                width: 719px;
                border: solid 1px #729CCF;
            }.prfInptDeact {
                border: solid 1px #E5EAF1;
                background: #F8F8FF;
                color: #2B4F81;
            }.prfInptAct {
                border: solid 1px #729CCF;
                background: #FFFFFF;
                color: #000000;
            }#prfSvBtn {
                display: none;
                margin-top: 5px;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js">
        </script>
        <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js">
        </script>
        <script type="text/javascript" src="js/jquery.imgareaselect.js">
        </script>
        <script type="text/javascript" src="js/jquery.corner.js">
        </script>
        <script type="text/javascript" src="js/yeeboomain.js">
        </script>
        <script type="text/javascript" src="js/JSONHandler.js">
        </script>
        <script type="text/javascript" src="js/jquery.jstepper.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#prfEdit').click(function(){
                    $('.prfInpts').classSwap('prfInptDeact', 'prfInptAct').attr('disabled', false);
                    $(this).hide();
                    $('#prfSvBtn').show();
                });
                $('#prfSvBtn').click(function(){
                    alert(JSON.encode($('#prfFm').serializeObject().srl));
                });
                $('input[name="nm3"]').ForceNumericOnly();
                $('input[name="nm8"]').ForceNumericOnly();
            });
            $.fn.classSwap = function(removeClassTxt, addClassTxt){
                $(this).addClass(addClassTxt).removeClass(removeClassTxt);
                return $(this);
            }
            $.fn.serializeObject = function(){
                var o = {};
                var a = this.serializeArray();
                var cnt = 0;
                $.each(a, function(){
                    if (o[this.name]) {
                        if (!o[this.name].push) {
                            o[this.name] = [o[this.name]];
                        }
                        o[this.name].push(this.value || '');
                    }
                    else {
                        o[this.name] = this.value || '';
                    }
                    ((this.value != null) && (this.value != '')) ? cnt++ : null;
                });
                return {
                    srl: o,
                    count: cnt
                };
            };
            $.fn.ForceNumericOnly = function(){
                return this.each(function(){
                    $(this).keydown(function(e){
                        var key = e.charCode || e.keyCode || 0;
                        // allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
                        return (key == 8 ||
                        key == 9 ||
                        key == 46 ||
                        key == 116 ||
                        (key >= 37 && key <= 40) ||
                        (key >= 48 && key <= 57) ||
                        (key >= 96 && key <= 105));
                    })
                })
            };
        </script>
    </head>
    <body>
        <div id="header">
            <img src="images/yeebooarmspics.png" style="float:left;"/>
            <div id="usr_name_box">
                <div id="usr_name">
                    Isaac Khaguli
                </div>
                <br>
                <div id="usr_prfl">
                    <a href="#">profile</a>
                    | <a href="#">Sign out</a>
                </div>
            </div>
        </div>
        <div style="height: 25px; border-bottom:2px solid #729CCF;border-top:2px solid #fff; background:none repeat scroll 0 0 #B8DFF8">
        </div>
        <center>
            <div style="background:#fff; width:100%">
                <div style="width: 858px;padding-left: 3px; padding-right:3px">
                    <div style="height: 25px; position:relative; top:-29px; border-bottom:2px solid #729CCF;border-top:2px solid #fff; background:none repeat scroll 0 0 #B8DFF8">
                        <ul id="list-nav-tp">
                            <li>
                                <a href="http://www.yeeboo.co.ke">PhotoBank</a>
                            </li>
                            <li>
                                <a href="http://www.yeeboo.co.ke/aboutus.html">PhotoDiary</a>
                            </li>
                            <li>
                                <a href="http://www.yeeboo.co.ke/products.html">PhotoGene</a>
                            </li>
                            <li>
                                <a href="http://www.yeeboo.co.ke/products.html">My Yeeboo</a>
                            </li>
                        </ul>
                    </div>
                    <div id="mainContainer">
                        <div style="float: left; width: 170px;border: solid 1px #729CCF; margin-top: 30px">
                            <div style="float: left; width: 160px; height: 160px; border: solid 1px #ff0000; margin: 4px">
                            </div>
                            <div style="text-align: center; margin-bottom: 5px">
                                <a>Profile Picture</a>
                            </div>
                        </div>
                        <div style="float: right; height: 400px; width: 741px;">
                            <div id="pgHeader">
                                Profile Management
                            </div>
                            <div class="prBx">
                                <div style="float: left; width: 100%; margin-bottom: 5px">
                                    <div style="float: left; font-weight: bold">
                                        Basic Details
                                    </div>
                                    <div style="float: right">
                                        <a id="prfEdit">
                                            <u>
                                                Edit
                                            </u>
                                        </a>
                                    </div>
                                </div>
                                <div style="float: left; width: 100%">
                                    <form id="prfFm">
                                        <table border="0" cellpadding="0" cellspacing="2">
                                            <tr>
                                                <td>
                                                    Account Number
                                                </td>
                                                <td>
                                                    &nbsp:
                                                </td>
                                                <td>
                                                    <input name="nm1" type="text" disabled="true" value="A000001" class="prfInptDeact">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    School Index Number
                                                </td>
                                                <td>
                                                    &nbsp:
                                                </td>
                                                <td>
                                                    <input name="nm2" type="text" disabled="true" value="A000001" class="prfInptDeact">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    National Id Number
                                                </td>
                                                <td>
                                                    &nbsp:
                                                </td>
                                                <td>
                                                    <input name="nm3" type="text" disabled="true" value="A000001" class="prfInpts prfInptDeact">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Nick Name
                                                </td>
                                                <td>
                                                    &nbsp:
                                                </td>
                                                <td>
                                                    <input name="nm4" type="text" disabled="true" value="A000001" class="prfInpts prfInptDeact">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    First Name
                                                </td>
                                                <td>
                                                    &nbsp:
                                                </td>
                                                <td>
                                                    <input name="nm5" type="text" disabled="true" value="A000001" class="prfInpts prfInptDeact">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Middle Name
                                                </td>
                                                <td>
                                                    &nbsp:
                                                </td>
                                                <td>
                                                    <input name="nm6" type="text" disabled="true" value="A000001" class="prfInpts prfInptDeact">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Last Name
                                                </td>
                                                <td>
                                                    &nbsp:
                                                </td>
                                                <td>
                                                    <input name="nm7" type="text" disabled="true" value="A000001" class="prfInpts prfInptDeact">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Mobile Number
                                                </td>
                                                <td>
                                                    &nbsp:
                                                </td>
                                                <td>
                                                    <input name="nm8" type="text" disabled="true" value="A000001" class="prfInpts prfInptDeact">
                                                </td>
                                            </tr>
                                        </table>
                                    </form>
                                    <button id="prfSvBtn">
                                        Save
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="contextCont">
                    </div>
                    <div id="spcB">
                    </div>
                </div>
            </div>
        </center>
    </body>
</html>
